<!DOCTYPE html>
<html>
<head>
    <title>下拉表-省市联动</title>
</head>
{% load static %}
<!-- <script src="{% static 'js/jquery.js' %}"></script> -->

<script src="/static/js/jquery.min.js"></script>
<script>
    $(function(){
        $.get('/prov',function(data){
            res=data.data //【1】返回的数据
            prov=$('#prov') //【2】得到省份的DOM位置

            /*//【方法1】循环处理get请求返回的数据
            for (i =0;  i<res.length; i++) {
                id=res[i][0] //【1】得到返回数据的ID
                title=res[i][1] //【2】得到返回的标题
                //【3】拼接option字段
                option_str='<option value="'+id + '">'+ title+ '</option>'
                prov.append(option_str) //【4】把数据逐个添加到省的下拉列表中
            }*/

            //【方法2】循环处理get请求返回的数据
        $.each(res,function(index,item){
            console.log(index)
            console.log(item)
            id=item[0]
            title=item[1]
            option_str='<option value="'+id + '">'+ title+ '</option>'
            prov.append(option_str)
        })



         // 绑定prov下拉列表框的change事件，获取省下面的市的信息
            $('#prov').change(function () {
                // 发起一个ajax请求 /city，获取省下面市级地区的信息
                // 获取点击省的id
                prov_id=$(this).val()
                $.get('/city'+prov_id, function (data) {
                    // 获取返回的json数据
                    res = data.data
                    // 获取city下拉列表框
                    city = $('#city')
                    // 清空city下拉列表框
                    city.empty().append('<option>---请选择市---</option>')
                    // 获取dis下拉列表框
                    dis = $('#dis')
                    // 清空dis下拉列表框
                    dis.empty().append('<option>---请选择县---</option>')
                    // 变量res数组，获取每一个元素:[地区id, 地区标题]
                    // 遍历取值添加到city下拉列表框中
                    $.each(res, function (index, item) {
                        id = item[0]
                        atitle = item[1]
                        option_str = '<option value="'+id + '">'+ atitle+ '</option>'
                        // 向city下拉列表框中追加元素
                        city.append(option_str)
                    })
                })
            })




             // 绑定city下拉列表框的change事件，获取市下面的县的信息
            $('#city').change(function () {
                // 发起一个ajax请求 /dis，获取市下面县级地区的信息
                // 获取点击市的id
                city_id=$(this).val()
                $.get('/dis'+city_id, function (data) {
                    // 获取返回的json数据
                    res = data.data
                    // 获取dis下拉列表框
                    dis = $('#dis')
                    // 清空dis下拉列表框
                    dis.empty().append('<option>---请选择县---</option>')
                    // 变量res数组，获取每一个元素:[地区id, 地区标题]
                    // 遍历取值添加到dis下拉列表框中
                    $.each(res, function (index, item) {
                        id = item[0]
                        atitle = item[1]
                        option_str = '<option value="'+id + '">'+ atitle+ '</option>'
                        // 向dis下拉列表框中追加元素
                        dis.append(option_str)
                    })
                })
                })
    })
    })
</script>
<body>

    <select id='prov'>
        <option>下拉选择省</option>
    </select>
    <select id='city'>
        <option>下拉选择市</option>
    </select>
    <select id='dis'>
        <option>下拉选择县</option>
    </select>

</body>
</html>